<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap5 核心文件 -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/popper.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- our project just needs Font Awesome Solid + Brands -->
    <link href="/static/fontawesome/css/all.css" rel="stylesheet" />
    <script src="/static/jquery/jquery-3.7.1.js"></script>
    <script src="/static/jquery/jquery.qrcode.min.js"></script>

    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <!-- <script src="/static/js/file-index.js"></script> -->
    <script src="/static/js/file-login.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="container-fluid p-5 d-flex flex-column justify-content-center align-items-center">
        <div class="card bg-secondary text-white" style="width: 60%;">
            <div class="card-header d-flex justify-content-end">

                <div class="btn-group">
                    <a class="btn btn-default" href="#loginkey">
                        <i class="fas fa-keyboard" title="密码登录"></i>
                    </a>
                    <a class="btn btn-default" href="#loginwechat">
                        <i class="fab fa-weixin" title="微信登录"></i>
                    </a>
                    <a class="btn btn-default" href="#loginqq">
                        <i class="fab fa-qq" title="QQ登录"></i>
                    </a>
                    <a class="btn btn-default" href="#loginphone">
                        <i class="fas fa-mobile-alt" title="手机登录"></i>
                    </a>
                </div>

            </div>
            <div class="card-body">
                <div class="loginstate container" style="display:none;" id="loginkey">
                    <h4 class="card-title">Video upload Login</h4>
                    <p class="card-text">Some username and password.</p>
                    <div class="mb-3">
                        <input class="form-control" type="text" name="username" id="username" placeholder="用户名">
                    </div>
                    <div class="mb-3">
                        <input class="form-control" type="password" name="password" id="password" placeholder="密码">
                    </div>
                    <div class="mb-3 d-grid">
                        <a href="#" class="btn btn-primary btn-block" role="button">登录</a>
                    </div>
                </div>

                <div class="loginstate container" style="display:block;" id="loginwechat">
                    <h4 class="card-title">Video upload Login</h4>
                    <p class="card-text">Some Scan code of Wechat.</p>
                    <div style="display: none;" id="wx_login_modal"></div>
                    <!-- <iframe src="{{url}}"></iframe>
                    <input type="hidden" name="wxCode" id="wxCode" value="{{index}}">
                    <input type="hidden" name="ticket" id="ticket" value="{{code}}">
                    <div class="container-fluid">
                        <div id="qrcode"></div>
                    </div> -->
                </div>

                <div class="loginstate container" style="display:none;" id="loginqq">
                    <h4 class="card-title">Video upload Login</h4>
                    <p class="card-text">Some Scan code of QQ.</p>
                </div>

                <div class="loginstate container" style="display:none;" id="loginphone">
                    <h4 class="card-title">Video upload Login</h4>
                    <p class="card-text">Some input code of SEMS.</p>
                </div>

            </div>
        </div>
    </div>
</body>

</html>